{% extends 'layout/base.html' %}
{% load netease %}
{% load profile %}
{% load static %}

{% block css %}
    {#    使用markdown必备样式#}
    <link rel="stylesheet" href="{% static 'plugin/editor-md/css/editormd.min.css' %}">
    <link rel="stylesheet" href="{% static 'css/blog/editor.css' %}">
{% endblock css %}

{% block js %}
    {#    markdown必备js#}
    <script src="{% static 'plugin/editor-md/editormd.js' %}"></script>
    <script type="text/javascript">

        var WIKI_UPLOAD_URL = '{% url 'blog:image_upload' %}';

        $(function () {
            initEditorMd();
            sendYuQue();
        })

        // 发送到yuque
        function sendYuQue() {
            $('.send-to-yuque').click(function () {
                $yuque = $(this).children('a');
                fid = $yuque.attr('id');
                console.log(fid);

                $.ajax({
                    url: '{% url 'blog:sync'  %}?note_id=' + fid,
                    type: 'get',
                }).done(function (data) {
                    document.title = data.msg;
                    if (data.code === 200) {
                        $yuque.addClass('disabled');
                    }
                }).fail(function () {
                    console.log("网络连接失败");
                })
            })
        }

        // Markdown编辑器的初始化
        function initEditorMd() {
            {#editor是对应编辑页的ID，path是指Markdown文件的依赖其他文件#}
            editormd('editor', {
                placeholder: "请输入内容",
                height: 600,
                emoji: true,
                path: "{% static 'plugin/editor-md/lib/' %}",

                // 配置Markdown支持文件上传
                imageUpload: true,
                imageFormats: ["jpg", 'jpeg', 'png', 'gif'],
                imageUploadURL: WIKI_UPLOAD_URL
            })
        }

    </script>
{% endblock js %}

{% block title %}编辑{% endblock title %}

{% block navbar %}
    <nav class="navbar navbar-inverse">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                        data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="{% url 'blog:index' %}">Home</a>
            </div>

            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">  <!--修复下拉显示-->
                <ul class="nav navbar-nav navbar-right">
                    {% if request.user %}
                        {% if request.user.is_super %}
                            <li class="dropdown">
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
                                   aria-haspopup="true" aria-expanded="false">
                                    {#用户头像#}
                                    {% user_profile request %}&nbsp;&nbsp;
                                    {{ request.user.username|title }} <span
                                        class="caret"></span></a>
                                <ul class="dropdown-menu">
                                    <li><a href="{% url 'blog:index' %}">返回首页</a></li>
                                    <li role="separator" class="divider"></li>
                                    <li><a href="{% url 'blog:profile' %}">个人中心</a></li>
                                    <li role="separator" class="divider"></li>
                                    <li><a href="{% url 'blog:logout' %}">退出</a></li>
                                </ul>
                            </li>
                        {% endif %}
                    {% else %}
                        <li><a href="{% url 'blog:login' %}">登录</a></li>
                        <li><a href="{% url 'blog:register' %}">注册</a></li>
                    {% endif %}
                </ul>
            </div>
        </div>
    </nav>
{% endblock navbar %}


{% block content %}
    <div class="panel panel-default" style="margin-bottom: 100px">
        <div class="panel-heading panel-head">
            <h4> 博客编辑&&修改页</h4>
            <span>
                <a type="button" class="btn btn-success" href="{% url 'blog:editor' %}">
                    <i class="fa fa-edit" aria-hidden="true"></i> 编辑
                </a>
            </span>
        </div>
        <div class="panel-body">
            <div class="col-sm-3 hidden-xs category-list">
                <ul class="list-group">
                    {% for item in category_list %}
                        <li class="list-group-item">
                            <span class="badge">
                                <a href="{% url 'blog:editor' %}?editor_category_list={{ item.id }}"
                                   style="color: white;text-decoration: none;">{{ item.count }}</a>
                            </span>
                            <a href="{% url 'blog:category' item.id %}">{{ item.name|title }}</a>
                        </li>
                    {% endfor %}

                    <div style="position: absolute;bottom: 0">
                        {% netease_music request %}
                    </div>
                </ul>
            </div>
            <div class="col-sm-9 content">
                {% if notes %}
                    <ul class="list-group">
                        {% for item in notes %}
                            <li class="list-group-item">
                                <span class="badge">
                                    <a href="{% url 'blog:modify' item.id %}"
                                       style="color: white;text-decoration: none;">
                                        <i class="fa fa-edit"></i> 修改
                                    </a>
                                </span>
                                {#后面用于同步#}
                                <span class="badge send-to-yuque">
                                    {% if item.sync_status %}
                                        <a href="#" id="{{ item.id }}"
                                           style="color: #040404;text-decoration: none;" class="disabled">
                                                <i class="fa fa-send"></i> 同步
                                        </a>
                                    {% else %}
                                        <a href="#" id="{{ item.id }}"
                                           style="color: #0af10a;text-decoration: none;">
                                                <i class="fa fa-send"></i> 同步
                                        </a>
                                    {% endif %}
                                </span>
                                <span class="badge">
                                    <a href="{% url 'blog:delete' item.id %}"
                                       style="color: #f3abab;text-decoration: none;">
                                        <i class="fa fa-trash"></i> 删除
                                    </a>
                                </span>
                                <a href="{% url 'blog:article' item.id %}"
                                   style="color: #222020;text-decoration: none;">
                                    {{ item.title }}
                                </a>
                                <span style="float: right;padding-right: 20px">
                                    {{ item.create_datetime }}
                                </span>
                            </li>
                        {% endfor %}
                    </ul>
                {% else %}
                    <form class="form-horizontal" method="post" enctype="multipart/form-data" novalidate>
                        {% csrf_token %}
                        {% for field in form %}
                            <div class="form-group">
                                {% if field.name == 'content' %}
                                    <div id="editor">
                                        {{ field }}
                                    </div>
                                    <span class="error-msg">{{ field.errors.0 }}</span>
                                {% elif field.name == 'top_image' %}
                                    <div class="image-btn">
                                        <button class="btn btn-default"><i class="fa fa-upload" aria-hidden="true"></i>
                                            上传首页图片
                                        </button>
                                        {{ field }}
                                    </div>
                                    <span class="error-msg">{{ field.errors.0 }}</span>
                                {% else %}
                                    {{ field }}
                                    <span class="error-msg">{{ field.errors.0 }}</span>
                                {% endif %}

                            </div>
                        {% endfor %}
                        <div class="form-group">
                            <div class="col-sm-offset-10 col-sm-2">
                                <button id="btnSubmit" class="btn btn-success center-block">提交</button>
                            </div>
                        </div>
                    </form>
                {% endif %}
            </div>
        </div>
    </div>

{% endblock content %}

{% block footer %}
{% endblock footer %}